<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import Modal from "@/components/Model.vue";  // 引入弹窗组件
import chinaMap from "../assets/mapJson/chaina.json"
import sichuanMap from "../assets/mapJson/四川省.json"
// 需要引入各省份的地图数据
// import beijingJson from "../assets/mapJson/北京市.json"
// import beijingJson from "../assets/mapJson/四川省.json"

// 当前地图层级
const currentLevel = ref('china')
// 当前选中的区域
const currentArea = ref('')
// 面包屑导航
const breadcrumb = ref(['全国'])

const mapViewRef = ref(null)
let myChart: echarts.ECharts | null = null

// 先定义城市数据映射
const cityDataMap: Record<string, any[]> = {
  '四川省': [
    { name: '成都市', value: 388 },
    { name: '绵阳市', value: 25 },
    { name: '德阳市', value: 135 },
    { name: '自贡市', value: 132 },
    { name: '攀枝花市', value: 18 },
    { name: '泸州市', value: 16 },
    { name: '内江市', value: 14 },
    { name: '乐山市', value: 127 },
    { name: '南充市', value: 139 },
    { name: '宜宾市', value: 15 },
    { name: '广安市', value: 12 },
    { name: '达州市', value: 13 },
    { name: '雅安市', value: 113 },
    { name: '眉山市', value: 130 },
    { name: '甘孜藏族自治州', value: 8 },
    { name: '凉山彝族自治州', value: 73 },
    { name: '阿坝藏族羌族自治州', value: 38 }
  ],
  '北京市': [
    { name: '东城区', value: 200 },
    { name: '西城区', value: 232 },
    { name: '朝阳区', value: 335 },
    { name: '丰台区', value: 235 },
    { name: '石景山区', value: 135 },
    { name: '海淀区', value: 403 },
    { name: '门头沟区', value: 102 },
    { name: '房山区', value: 18 },
    { name: '通州区', value: 22 },
    { name: '顺义区', value: 274 },
    { name: '昌平区', value: 25 },
    { name: '大兴区', value: 423 },
    { name: '怀柔区', value: 135 },
    { name: '平谷区', value: 13 },
    { name: '密云区', value: 12 },
    { name: '延庆区', value: 310 }
  ],
  '新疆维吾尔自治区': [
    { name: '乌鲁木齐市', value: 450 },
    { name: '克拉玛依市', value: 120 },
    { name: '吐鲁番市', value: 80 },
    { name: '哈密市', value: 95 },
    { name: '昌吉回族自治州', value: 200 },
    { name: '博尔塔拉蒙古自治州', value: 75 },
    { name: '巴音郭楞蒙古自治州', value: 150 },
    { name: '阿克苏地区', value: 180 },
    { name: '克孜勒苏柯尔克孜自治州', value: 60 },
    { name: '喀什地区', value: 300 },
    { name: '和田地区', value: 130 },
    { name: '伊犁哈萨克自治州', value: 250 },
    { name: '塔城地区', value: 90 },
    { name: '阿勒泰地区', value: 70 },
    { name: '石河子市', value: 110 },
    { name: '阿拉尔市', value: 50 },
    { name: '图木舒克市', value: 40 },
    { name: '五家渠市', value: 30 },
    { name: '北屯市', value: 20 },
    { name: '铁门关市', value: 25 },
    { name: '双河市', value: 15 },
    { name: '可克达拉市', value: 18 },
    { name: '昆玉市', value: 10 }
  ], '天津市': [
    { name: '和平区', value: 150 },
    { name: '河东区', value: 120 },
    { name: '河西区', value: 130 },
    { name: '南开区', value: 140 },
    { name: '河北区', value: 110 },
    { name: '红桥区', value: 100 },
    { name: '滨海新区', value: 300 },
    { name: '东丽区', value: 90 },
    { name: '西青区', value: 95 },
    { name: '津南区', value: 85 },
    { name: '北辰区', value: 80 },
    { name: '武清区', value: 200 },
    { name: '宝坻区', value: 75 },
    { name: '宁河区', value: 60 },
    { name: '静海区', value: 70 },
    { name: '蓟州区', value: 50 }
  ],

  '上海市': [
    { name: '黄浦区', value: 200 },
    { name: '徐汇区', value: 180 },
    { name: '长宁区', value: 150 },
    { name: '静安区', value: 170 },
    { name: '普陀区', value: 160 },
    { name: '虹口区', value: 140 },
    { name: '杨浦区', value: 190 },
    { name: '闵行区', value: 220 },
    { name: '宝山区', value: 210 },
    { name: '嘉定区', value: 130 },
    { name: '浦东新区', value: 400 },
    { name: '金山区', value: 90 },
    { name: '松江区', value: 120 },
    { name: '青浦区', value: 100 },
    { name: '奉贤区', value: 80 },
    { name: '崇明区', value: 60 }
  ],

  '重庆市': [
    { name: '万州区', value: 150 },
    { name: '涪陵区', value: 120 },
    { name: '渝中区', value: 180 },
    { name: '大渡口区', value: 90 },
    { name: '江北区', value: 130 },
    { name: '沙坪坝区', value: 140 },
    { name: '九龙坡区', value: 160 },
    { name: '南岸区', value: 150 },
    { name: '北碚区', value: 100 },
    { name: '綦江区', value: 80 },
    { name: '大足区', value: 70 },
    { name: '渝北区', value: 200 },
    { name: '巴南区', value: 110 },
    { name: '黔江区', value: 60 },
    { name: '长寿区', value: 90 },
    { name: '江津区', value: 130 },
    { name: '合川区', value: 120 },
    { name: '永川区', value: 100 },
    { name: '南川区', value: 70 }
  ],

  '河北省': [
    { name: '石家庄市', value: 300 },
    { name: '唐山市', value: 250 },
    { name: '秦皇岛市', value: 120 },
    { name: '邯郸市', value: 200 },
    { name: '邢台市', value: 180 },
    { name: '保定市', value: 220 },
    { name: '张家口市', value: 150 },
    { name: '承德市', value: 100 },
    { name: '沧州市', value: 190 },
    { name: '廊坊市', value: 170 },
    { name: '衡水市', value: 130 }
  ],

  '河南省': [
    { name: '郑州市', value: 400 },
    { name: '开封市', value: 150 },
    { name: '洛阳市', value: 250 },
    { name: '平顶山市', value: 120 },
    { name: '安阳市', value: 130 },
    { name: '鹤壁市', value: 80 },
    { name: '新乡市', value: 180 },
    { name: '焦作市', value: 140 },
    { name: '濮阳市', value: 100 },
    { name: '许昌市', value: 160 },
    { name: '漯河市', value: 90 },
    { name: '三门峡市', value: 70 },
    { name: '南阳市', value: 200 },
    { name: '商丘市', value: 170 },
    { name: '信阳市', value: 150 },
    { name: '周口市', value: 190 },
    { name: '驻马店市', value: 160 }
  ],

  '云南省': [
    { name: '昆明市', value: 300 },
    { name: '曲靖市', value: 150 },
    { name: '玉溪市', value: 120 },
    { name: '保山市', value: 90 },
    { name: '昭通市', value: 100 },
    { name: '丽江市', value: 80 },
    { name: '普洱市', value: 70 },
    { name: '临沧市', value: 60 },
    { name: '楚雄彝族自治州', value: 110 },
    { name: '红河哈尼族彝族自治州', value: 130 },
    { name: '文山壮族苗族自治州', value: 90 },
    { name: '西双版纳傣族自治州', value: 70 },
    { name: '大理白族自治州', value: 120 },
    { name: '德宏傣族景颇族自治州', value: 60 },
    { name: '怒江傈僳族自治州', value: 40 },
    { name: '迪庆藏族自治州', value: 30 }
  ],

  '辽宁省': [
    { name: '沈阳市', value: 350 },
    { name: '大连市', value: 300 },
    { name: '鞍山市', value: 150 },
    { name: '抚顺市', value: 120 },
    { name: '本溪市', value: 100 },
    { name: '丹东市', value: 90 },
    { name: '锦州市', value: 110 },
    { name: '营口市', value: 130 },
    { name: '阜新市', value: 80 },
    { name: '辽阳市', value: 100 },
    { name: '盘锦市', value: 90 },
    { name: '铁岭市', value: 70 },
    { name: '朝阳市', value: 60 },
    { name: '葫芦岛市', value: 50 }
  ],

  '黑龙江省': [
    { name: '哈尔滨市', value: 400 },
    { name: '齐齐哈尔市', value: 150 },
    { name: '鸡西市', value: 90 },
    { name: '鹤岗市', value: 70 },
    { name: '双鸭山市', value: 80 },
    { name: '大庆市', value: 200 },
    { name: '伊春市', value: 60 },
    { name: '佳木斯市', value: 120 },
    { name: '七台河市', value: 50 },
    { name: '牡丹江市', value: 130 },
    { name: '黑河市', value: 70 },
    { name: '绥化市', value: 100 },
    { name: '大兴安岭地区', value: 30 }
  ],

  '湖南省': [
    { name: '长沙市', value: 350 },
    { name: '株洲市', value: 150 },
    { name: '湘潭市', value: 120 },
    { name: '衡阳市', value: 200 },
    { name: '邵阳市', value: 180 },
    { name: '岳阳市', value: 170 },
    { name: '常德市', value: 160 },
    { name: '张家界市', value: 90 },
    { name: '益阳市', value: 130 },
    { name: '郴州市', value: 140 },
    { name: '永州市', value: 150 },
    { name: '怀化市', value: 120 },
    { name: '娄底市', value: 100 },
    { name: '湘西土家族苗族自治州', value: 80 }
  ],

  '安徽省': [
    { name: '合肥市', value: 300 },
    { name: '芜湖市', value: 150 },
    { name: '蚌埠市', value: 120 },
    { name: '淮南市', value: 100 },
    { name: '马鞍山市', value: 90 },
    { name: '淮北市', value: 80 },
    { name: '铜陵市', value: 70 },
    { name: '安庆市', value: 130 },
    { name: '黄山市', value: 60 },
    { name: '滁州市', value: 110 },
    { name: '阜阳市', value: 140 },
    { name: '宿州市', value: 100 },
    { name: '六安市', value: 120 },
    { name: '亳州市', value: 90 },
    { name: '池州市', value: 70 },
    { name: '宣城市', value: 80 }
  ],

  '山东省': [
    { name: '济南市', value: 350 },
    { name: '青岛市', value: 400 },
    { name: '淄博市', value: 150 },
    { name: '枣庄市', value: 120 },
    { name: '东营市', value: 100 },
    { name: '烟台市', value: 200 },
    { name: '潍坊市', value: 180 },
    { name: '济宁市', value: 170 },
    { name: '泰安市', value: 130 },
    { name: '威海市', value: 110 },
    { name: '日照市', value: 90 },
    { name: '临沂市', value: 190 },
    { name: '德州市', value: 120 },
    { name: '聊城市', value: 100 },
    { name: '滨州市', value: 90 },
    { name: '菏泽市', value: 140 }
  ],

  '江苏省': [
    { name: '南京市', value: 400 },
    { name: '无锡市', value: 300 },
    { name: '徐州市', value: 200 },
    { name: '常州市', value: 180 },
    { name: '苏州市', value: 350 },
    { name: '南通市', value: 170 },
    { name: '连云港市', value: 120 },
    { name: '淮安市', value: 130 },
    { name: '盐城市', value: 150 },
    { name: '扬州市', value: 140 },
    { name: '镇江市', value: 110 },
    { name: '泰州市', value: 120 },
    { name: '宿迁市', value: 100 }
  ],

  '浙江省': [
    { name: '杭州市', value: 400 },
    { name: '宁波市', value: 350 },
    { name: '温州市', value: 200 },
    { name: '嘉兴市', value: 150 },
    { name: '湖州市', value: 120 },
    { name: '绍兴市', value: 180 },
    { name: '金华市', value: 170 },
    { name: '衢州市', value: 90 },
    { name: '舟山市', value: 70 },
    { name: '台州市', value: 160 },
    { name: '丽水市', value: 80 }
  ],

  '江西省': [
    { name: '南昌市', value: 300 },
    { name: '景德镇市', value: 90 },
    { name: '萍乡市', value: 80 },
    { name: '九江市', value: 150 },
    { name: '新余市', value: 70 },
    { name: '鹰潭市', value: 60 },
    { name: '赣州市', value: 200 },
    { name: '吉安市', value: 130 },
    { name: '宜春市', value: 120 },
    { name: '抚州市', value: 100 },
    { name: '上饶市', value: 140 }
  ],

  '湖北省': [
    { name: '武汉市', value: 400 },
    { name: '黄石市', value: 120 },
    { name: '十堰市', value: 100 },
    { name: '宜昌市', value: 150 },
    { name: '襄阳市', value: 180 },
    { name: '鄂州市', value: 90 },
    { name: '荆门市', value: 110 },
    { name: '孝感市', value: 130 },
    { name: '荆州市', value: 140 },
    { name: '黄冈市', value: 120 },
    { name: '咸宁市', value: 100 },
    { name: '随州市', value: 80 },
    { name: '恩施土家族苗族自治州', value: 90 },
    { name: '仙桃市', value: 70 },
    { name: '潜江市', value: 60 },
    { name: '天门市', value: 50 },
    { name: '神农架林区', value: 30 }
  ],

  '广西壮族自治区': [
    { name: '南宁市', value: 300 },
    { name: '柳州市', value: 150 },
    { name: '桂林市', value: 180 },
    { name: '梧州市', value: 100 },
    { name: '北海市', value: 90 },
    { name: '防城港市', value: 80 },
    { name: '钦州市', value: 70 },
    { name: '贵港市', value: 110 },
    { name: '玉林市', value: 120 },
    { name: '百色市', value: 90 },
    { name: '贺州市', value: 70 },
    { name: '河池市', value: 80 },
    { name: '来宾市', value: 60 },
    { name: '崇左市', value: 50 }
  ],

  '甘肃省': [
    { name: '兰州市', value: 250 },
    { name: '嘉峪关市', value: 70 },
    { name: '金昌市', value: 60 },
    { name: '白银市', value: 90 },
    { name: '天水市', value: 100 },
    { name: '武威市', value: 80 },
    { name: '张掖市', value: 70 },
    { name: '平凉市', value: 60 },
    { name: '酒泉市', value: 90 },
    { name: '庆阳市', value: 80 },
    { name: '定西市', value: 70 },
    { name: '陇南市', value: 60 },
    { name: '临夏回族自治州', value: 50 },
    { name: '甘南藏族自治州', value: 40 }
  ],

  '山西省': [
    { name: '太原市', value: 200 },
    { name: '大同市', value: 120 },
    { name: '阳泉市', value: 80 },
    { name: '长治市', value: 100 },
    { name: '晋城市', value: 90 },
    { name: '朔州市', value: 70 },
    { name: '晋中市', value: 110 },
    { name: '运城市', value: 130 },
    { name: '忻州市', value: 90 },
    { name: '临汾市', value: 120 },
    { name: '吕梁市', value: 100 }
  ],

  '内蒙古自治区': [
    { name: '呼和浩特市', value: 150 },
    { name: '包头市', value: 120 },
    { name: '乌海市', value: 70 },
    { name: '赤峰市', value: 100 },
    { name: '通辽市', value: 90 },
    { name: '鄂尔多斯市', value: 110 },
    { name: '呼伦贝尔市', value: 80 },
    { name: '巴彦淖尔市', value: 70 },
    { name: '乌兰察布市', value: 60 },
    { name: '兴安盟', value: 50 },
    { name: '锡林郭勒盟', value: 40 },
    { name: '阿拉善盟', value: 30 }
  ],

  '陕西省': [
    { name: '西安市', value: 300 },
    { name: '铜川市', value: 70 },
    { name: '宝鸡市', value: 120 },
    { name: '咸阳市', value: 150 },
    { name: '渭南市', value: 130 },
    { name: '延安市', value: 100 },
    { name: '汉中市', value: 110 },
    { name: '榆林市', value: 140 },
    { name: '安康市', value: 90 },
    { name: '商洛市', value: 80 }
  ],

  '吉林省': [
    { name: '长春市', value: 250 },
    { name: '吉林市', value: 150 },
    { name: '四平市', value: 100 },
    { name: '辽源市', value: 70 },
    { name: '通化市', value: 90 },
    { name: '白山市', value: 80 },
    { name: '松原市', value: 110 },
    { name: '白城市', value: 70 },
    { name: '延边朝鲜族自治州', value: 90 }
  ],

  '福建省': [
    { name: '福州市', value: 200 },
    { name: '厦门市', value: 250 },
    { name: '莆田市', value: 120 },
    { name: '三明市', value: 100 },
    { name: '泉州市', value: 180 },
    { name: '漳州市', value: 150 },
    { name: '南平市', value: 90 },
    { name: '龙岩市', value: 110 },
    { name: '宁德市', value: 80 }
  ],

  '贵州省': [
    { name: '贵阳市', value: 200 },
    { name: '六盘水市', value: 100 },
    { name: '遵义市', value: 150 },
    { name: '安顺市', value: 90 },
    { name: '毕节市', value: 120 },
    { name: '铜仁市', value: 80 },
    { name: '黔西南布依族苗族自治州', value: 70 },
    { name: '黔东南苗族侗族自治州', value: 90 },
    { name: '黔南布依族苗族自治州', value: 80 }
  ],

  '广东省': [
    { name: '广州市', value: 400 },
    { name: '韶关市', value: 120 },
    { name: '深圳市', value: 450 },
    { name: '珠海市', value: 150 },
    { name: '汕头市', value: 130 },
    { name: '佛山市', value: 200 },
    { name: '江门市', value: 140 },
    { name: '湛江市', value: 160 },
    { name: '茂名市', value: 150 },
    { name: '肇庆市', value: 120 },
    { name: '惠州市', value: 170 },
    { name: '梅州市', value: 100 },
    { name: '汕尾市', value: 90 },
    { name: '河源市', value: 80 },
    { name: '阳江市', value: 70 },
    { name: '清远市', value: 110 },
    { name: '东莞市', value: 250 },
    { name: '中山市', value: 180 },
    { name: '潮州市', value: 90 },
    { name: '揭阳市', value: 120 },
    { name: '云浮市', value: 70 }
  ],

  '青海省': [
    { name: '西宁市', value: 150 },
    { name: '海东市', value: 90 },
    { name: '海北藏族自治州', value: 50 },
    { name: '黄南藏族自治州', value: 40 },
    { name: '海南藏族自治州', value: 60 },
    { name: '果洛藏族自治州', value: 30 },
    { name: '玉树藏族自治州', value: 20 },
    { name: '海西蒙古族藏族自治州', value: 70 }
  ],

  '西藏自治区': [
    { name: '拉萨市', value: 100 },
    { name: '日喀则市', value: 70 },
    { name: '昌都市', value: 60 },
    { name: '林芝市', value: 50 },
    { name: '山南市', value: 40 },
    { name: '那曲市', value: 30 },
    { name: '阿里地区', value: 20 }
  ],

  '宁夏回族自治区': [
    { name: '银川市', value: 150 },
    { name: '石嘴山市', value: 90 },
    { name: '吴忠市', value: 80 },
    { name: '固原市', value: 70 },
    { name: '中卫市', value: 60 }
  ],

  '海南省': [
    { name: '海口市', value: 150 },
    { name: '三亚市', value: 120 },
    { name: '三沙市', value: 30 },
    { name: '儋州市', value: 90 },
    { name: '五指山市', value: 40 },
    { name: '琼海市', value: 70 },
    { name: '文昌市', value: 60 },
    { name: '万宁市', value: 50 },
    { name: '东方市', value: 40 },
    { name: '定安县', value: 30 },
    { name: '屯昌县', value: 20 },
    { name: '澄迈县', value: 30 },
    { name: '临高县', value: 20 },
    { name: '白沙黎族自治县', value: 10 },
    { name: '昌江黎族自治县', value: 10 },
    { name: '乐东黎族自治县', value: 10 },
    { name: '陵水黎族自治县', value: 10 },
    { name: '保亭黎族苗族自治县', value: 10 },
    { name: '琼中黎族苗族自治县', value: 10 }
  ],

  '台湾省': [
    { name: '台北市', value: 200 },
    { name: '高雄市', value: 180 },
    { name: '基隆市', value: 90 },
    { name: '台中市', value: 150 },
    { name: '台南市', value: 130 },
    { name: '新竹市', value: 80 },
    { name: '嘉义市', value: 70 },
    { name: '新北市', value: 220 },
    { name: '桃园市', value: 170 },
    { name: '新竹县', value: 60 },
    { name: '苗栗县', value: 50 },
    { name: '彰化县', value: 70 },
    { name: '南投县', value: 40 },
    { name: '云林县', value: 50 },
    { name: '嘉义县', value: 60 },
    { name: '屏东县', value: 80 },
    { name: '宜兰县', value: 40 },
    { name: '花莲县', value: 30 },
    { name: '台东县', value: 20 },
    { name: '澎湖县', value: 10 },
    { name: '金门县', value: 10 },
    { name: '连江县', value: 10 }
  ],

  '香港特别行政区': [
    { name: '香港岛', value: 150 },
    { name: '九龙', value: 200 },
    { name: '新界', value: 250 }
  ],

  '澳门特别行政区': [
    { name: '澳门半岛', value: 100 },
    { name: '氹仔岛', value: 80 },
    { name: '路环岛', value: 50 }
  ]
  // ... 可以继续添加其他省份的城市数据
}


// 计算省级数据，基于城市数据的总和
const calculateProvinceData = () => {
  const provinceData = []

  // 遍历所有省份
  for (const [province, cities] of Object.entries(cityDataMap)) {
    // 计算该省份所有城市的数值总和
    const totalValue = cities.reduce((sum, city) => sum + city.value, 0)
    provinceData.push({ name: province, value: totalValue })
  }

  // // 为没有详细城市数据的省份生成随机数据
  // const provinces = [
  //   '天津市', '上海市', '重庆市', '河北省', '河南省', '云南省', '辽宁省',
  //   '黑龙江省', '湖南省', '安徽省', '山东省', '江苏省',
  //   '浙江省', '江西省', '湖北省', '广西壮族自治区', '甘肃省', '山西省',
  //   '内蒙古自治区', '陕西省', '吉林省', '福建省', '贵州省', '广东省',
  //   '青海省', '西藏自治区', '宁夏回族自治区', '海南省', '台湾省',
  //   '香港特别行政区', '澳门特别行政区'
  // ]

  // provinces.forEach(province => {
  //   if (!cityDataMap[province]) {
  //     provinceData.push({
  //       name: province,
  //       value: Math.round(Math.random() * 300 + 200) // 生成200-500之间的随机数
  //     })
  //   }
  // })

  return provinceData
}

// 生成省级地图数据
const mapData = calculateProvinceData()

// 修改获取省份数据的函数
const getProvinceData = (provinceName: string) => {
  return cityDataMap[provinceName] || []
}

// 修改点击事件处理函数
const handleMapClick = async (params: any) => {
  if (!params.name) return

  try {
    if (currentLevel.value === 'china') {
      // 处理省级点击
      const provinceName = params.name

      if (!cityDataMap[provinceName]) {
        console.warn(`暂无 ${provinceName} 的城市数据`)
        return
      }

      let provinceJson
      if (provinceName === '四川省') {
        provinceJson = sichuanMap
      } else {
        provinceJson = await import(`../assets/mapJson/${provinceName}.json`)
      }

      echarts.registerMap(provinceName, provinceJson)

      currentLevel.value = provinceName
      currentArea.value = provinceName
      breadcrumb.value.push(provinceName)

      const option = {
        ...getBaseOption(),
        series: [
          {
            type: 'map',
            map: provinceName,
            roam: false,
            zoom: 1.2,
            label: {
              show: true,
              color: '#fff',
              fontSize: 10
            },
            itemStyle: {
              areaColor: '#c6e5ff',
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 'bold'
              },
              itemStyle: {
                areaColor: '#409eff',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
              }
            },
            data: getProvinceData(provinceName)
          }
        ]
      }

      myChart?.setOption(option, true)
    } else {
      // 处理市级点击
      const cityName = params.name
      const cityData = cityDataMap[currentArea.value]?.find(city => city.name === cityName)

      if (cityData) {
        // console.log('点击的城市:', cityName)
        // console.log('城市数据:', cityData)

        // 这里可以添加你想要的操作，比如：

        // 1. 显示详细信息弹窗
        showCityDetail(cityData)

        // 2. 触发自定义事件
        emit('city-click', {
          province: currentArea.value,
          city: cityName,
          data: cityData
        })

        // 3. 路由跳转
        // router.push(`/city/${cityName}`)

        // 4. 更新其他组件
        // store.dispatch('updateSelectedCity', cityData)
      }
    }
  } catch (error) {
    console.error('地图点击处理错误:', error)
  }
}

// 控制弹窗显示状态
const isModalVisible = ref(false);
const bianObj = ref({
  title:"北京",
  bian_number:12,
  bian_jinBao:13,
  time:'2025-01-10 07:33Am'
})
// 添加城市详情弹窗函数
const showCityDetail = (cityData: any) => {
  isModalVisible.value = true;
  bianObj.value.title = cityData.name
  bianObj.value.bian_number = cityData.value
  // 这里实现弹窗逻辑
  // alert(`
  //   城市: ${cityData.name}
  //   数值: ${cityData.value}
    
  //   // 可以添加更多详细信息
  // `)
}

// 如果需要触发自定义事件，需要定义 emit
const emit = defineEmits(['city-click'])

// 修改基础配置函数
const getBaseOption = () => {
  return {
    backgroundColor: 'transparent',
    visualMap: {
      show: true,
      type: 'continuous',
      min: 0,
      max: 500,
      text: ['高', '低'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['#c6e5ff', '#409eff', '#0d47a1']
      },
      textStyle: {
        color: '#fff'
      },
      left: 'left',
      top: 'bottom'
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        const value = params.value || 0
        return `${params.name}<br/>数量：${value}`
      },
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: '#fff',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      }
    }
  }
}

// 修改更新地图函数
const updateMap = (mapName: string, data: any[]) => {
  if (!myChart) return

  const option = {
    ...getBaseOption(),
    animation: true,
    animationDuration: 300,
    animationEasing: 'cubicOut',
    series: [
      {
        type: 'map',
        map: mapName,
        roam: false, // 禁用缩放和平移
        zoom: 1.2, // 固定缩放比例
        label: {
          show: true,
          color: '#fff',
          fontSize: 10
        },
        itemStyle: {
          areaColor: '#c6e5ff',
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            color: '#fff',
            fontSize: 12,
            fontWeight: 'bold'
          },
          itemStyle: {
            areaColor: '#409eff',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10
          }
        },
        data: data
      }
    ]
  }

  myChart.setOption(option, true)
}

// 返回上一级
const goBack = () => {
  if (currentLevel.value === 'china') return

  // 返回全国地图 
  currentLevel.value = 'china'
  currentArea.value = ''
  breadcrumb.value.pop()

  // 更新地图
  updateMap('china', mapData)
}

// 初始化地图
const initMap = () => {
  if (!mapViewRef.value) return

  myChart = echarts.init(mapViewRef.value)
  echarts.registerMap('china', chinaMap)

  updateMap('china', mapData)
  myChart.on('click', handleMapClick)

  // 移除缩放事件监听
  // myChart.getZr().on('mousewheel', ...)

  window.addEventListener('resize', handleResize)
}

const handleResize = () => {
  myChart?.resize()
}

// 组件卸载时清理
onUnmounted(() => {
  if (myChart) {
    myChart.off('click', handleMapClick) // 移除点击事件监听
    myChart.dispose()
  }
  window.removeEventListener('resize', handleResize)
})

onMounted(() => {
  initMap()
})
</script>

<template>
  <div class="map-wrapper">
    <!-- 添加装饰性边框 -->
    <div class="map-border">
      <div class="border-line top"></div>
      <div class="border-line right"></div>
      <div class="border-line bottom"></div>
      <div class="border-line left"></div>
      <div class="corner top-left"></div>
      <div class="corner top-right"></div>
      <div class="corner bottom-left"></div>
      <div class="corner bottom-right"></div>
    </div>

    <div class="breadcrumb">
      <span v-for="(item, index) in breadcrumb" :key="index" @click="index < breadcrumb.length - 1 && goBack()"
        :class="{ clickable: index < breadcrumb.length - 1 }">
        {{ item }}
        <span v-if="index < breadcrumb.length - 1"> > </span>
      </span>
    </div>

    <div ref="mapViewRef" class="map-container"></div>
  </div>
   <!-- 使用弹窗组件 -->
   <Modal v-model:visible="isModalVisible" :bianObj="bianObj"></Modal>
</template>

<style scoped lang="scss">
.map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #2d2d2d;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.map-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;

  .border-line {
    position: absolute;
    background: linear-gradient(90deg,
        transparent,
        rgba(64, 158, 255, 0.2) 20%,
        rgba(64, 158, 255, 0.3) 50%,
        rgba(64, 158, 255, 0.2) 80%,
        transparent);

    &.top,
    &.bottom {
      height: 1px;
      left: 40px;
      right: 40px;
    }

    &.left,
    &.right {
      width: 1px;
      top: 40px;
      bottom: 40px;
    }

    &.top {
      top: 0;
    }

    &.right {
      right: 0;
    }

    &.bottom {
      bottom: 0;
    }

    &.left {
      left: 0;
    }
  }

  .corner {
    position: absolute;
    width: 40px;
    height: 40px;

    &::before,
    &::after {
      content: '';
      position: absolute;
      background: rgba(64, 158, 255, 0.3);
    }

    &::before {
      width: 2px;
      height: 100%;
    }

    &::after {
      width: 100%;
      height: 2px;
    }

    &.top-left {
      top: 0;
      left: 0;

      &::before {
        left: 0;
      }

      &::after {
        top: 0;
      }
    }

    &.top-right {
      top: 0;
      right: 0;

      &::before {
        right: 0;
      }

      &::after {
        top: 0;
      }
    }

    &.bottom-left {
      bottom: 0;
      left: 0;

      &::before {
        left: 0;
      }

      &::after {
        bottom: 0;
      }
    }

    &.bottom-right {
      bottom: 0;
      right: 0;

      &::before {
        right: 0;
      }

      &::after {
        bottom: 0;
      }
    }
  }
}

.breadcrumb {
  position: relative;
  z-index: 1;
  padding: 15px 20px;
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin-bottom: 15px;

  span {
    &.clickable {
      cursor: pointer;
      color: #409eff;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.map-container {
  position: relative;
  flex: 1;
  width: 100%;
  background:
    radial-gradient(circle at center,
      rgba(64, 158, 255, 0.05) 0%,
      rgba(45, 45, 45, 0) 70%),
    repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(64, 158, 255, 0.02) 10px,
      rgba(64, 158, 255, 0.02) 20px);

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow:
      inset 0 0 50px rgba(64, 158, 255, 0.1),
      inset 0 0 100px rgba(0, 0, 0, 0.2);
    pointer-events: none;
  }
}
</style>
